<template>
  <el-dialog
    title="更换欢迎语任务"
    :visible.sync="$attrs.visable"
    width="520px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="mb-15">将群聊 更换至</div>
    <div class="listbody">
      <el-radio-group v-model="radio" class="w_full">
        <el-radio
          v-for="(item,index) in dataList"
          :key="index"
          :label="item.id"
          class="listitem flex aligncenter justifystart w_full mb-15"
        >
          <div class="flexbetween">
            <div>
              <div class="fw-5 line_h_22 mb-5">{{item.name}}</div>
              <div class="c_999">1文本</div>
            </div>
            <div class="green flex aligncenter">
              <div class="dot mr-5"></div>
              启用中
            </div>
          </div>
        </el-radio>
      </el-radio-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      radio:'',
      dataList: [{id:1,name:'方案1'},{id:2,name:'方案2'}],
    };
  },
  props: {
    type: {
      default: 1, // 1 转让群主  2 设置群管
    },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleSubmit() {},
  },
};
</script>
<style lang="scss" scoped>
.listbody {
  max-height: 600px;
  overflow: hidden;
  overflow-y: auto;
}
.el-radio {
  ::v-deep .el-radio__label {
    width: 95%;
  }
}
.listitem {
  border: 1px solid #e9e9e9;
  padding: 15px;
  border-radius: 2px;
  margin-bottom: 15px;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
}
.green {
  color: green;
  .dot {
    background-color: green;
  }
}
</style>